<template>
	<view style="height: 2000upx;" v-if="detail">
	<!-- 	<view class="cu-bar bg-white top">
			<view class="action">
				<text class="cuIcon-back text-gray" @click="back"></text> 返回
			</view>
			<view class="content text-bold">
				{{detail.name}}
			</view>
		</view> -->
		
		<topTabbar :detail="detail" @back="back"></topTabbar>

		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-active-color="yellow" indicator-color="gray">
			<swiper-item @click="handleBanner(imgurl,index)" v-for="(item,index) in detail.list" :key="index">
				<!-- <template  > -->
					<!-- <text>{{itm.b}}</text>	 -->
					<!-- <text>{{imgurl+`/middle/${index+1}.jpg`}}</text> -->
					<image v-for="(itm,idx) in item.pic.list" :key="idx" :src="imgurl+`/middle/${index+1}.jpg`" mode="heightFix"></image>
				<!-- </template> -->
			</swiper-item>
		</swiper>
		<view class="" style="margin-bottom: 200upx;">
			<view class="flex justify-around">
				<view v-for="(item,index) in detail.list " :key="index"
					:class="['text-center padding-sm tab',{active:tabIdx==index}]" @click="tabIdx=index">
					<view>
						{{item.spec}}
					</view>
					<view class="">
						{{item.weight}}

					</view>
					<view class="">
						{{item.fittings}}
					</view>

				</view>
			</view>
			<!-- 	<button type="primary" @click="handleBack">返回</button>
			<button type="default" @click="handleSwith">底部选项卡跳转</button> -->


			<view class="padding-sm fs-28 u-border-bottom">
				￥{{detail.list[tabIdx].price}}
			</view>
			<view class="padding-sm fs-16 u-border-bottom">
				<text class="iconfont icon-shijian"></text>{{detail.list[tabIdx].ahead}}
				<text class="margin-lr iconfont icon-biaoqian_o">10cm*20cm</text>
				
				<text class="iconfont icon-canju">{{detail.list[tabIdx].edible}}</text>
				
			</view>
			<view class="padding-sm fs-16 u-border-bottom iconfont icon-canju">
				{{detail.list[tabIdx].fittings}}
			</view>


		</view>

		<!-- <view class="flex justify-around fixed padding-tb-sm">
			<button class="cu-btn bg-brown lg" type="default">加入购物车</button>
			<button class="cu-btn bg-yellow lg" type="default">立即购买</button>
		</view> -->
		<view class="cu-bar bg-white tabbar border shop fixeds">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view>
				客服
			</button>
			<view class="action">
				<view class="cuIcon-cart">
					<view class="cu-tag badge">99</view>
				</view>
				购物车
			</view>
			<view class="bg-orange submit" @click="handleAdd({...detail,idx:tabIdx})">加入购物车</view>
			<view class=" submit" id="desc1" :class="this.time>=0?'qianggou':'bg-red'"  @click="handleAdd({...detail,idx:tabIdx})">{{show}}{{time>=0?"倒计时"+time:''}}</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				banner: [],
				tabIdx: 0, //标志用户切换选中的子商品序号	,
				detail: null,
				imgurl: "https://static.mcake.com/goods/lanmeiqingrunapolun/N0301",
				imglist: [],
				time:3,
				show:"等待发售"
			}
		},
		methods: {
			...mapMutations({
				handleAdd:'cart/cartAddMut'
			}),
			goShopcar(){
				uni.navigateTo({
					url:'/pages/shopcar/shopcar'
				})
			},
			back() {
				// console.log(11);
				uni.navigateBack({

				})
			},
			handleBanner(imgurl, index) {
				console.log(1);
				uni.previewImage({
					urls: this.imglist,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + current + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// handleBack() {
			// 	uni.navigateBack({
			// 		delta: 1
			// 	})
			// },
			handleSwith() {
				uni.switchTab({ //这样只能跳转底部选项栏，navigateto不能跳转底部选项卡,相反switchTab也只能跳转选项卡
					url: "../cake/cake"
				})
			},

		},
		watch:{
			time:function(){
				if(this.time<0){
					this.show="开始抢购"
					 // var e = document.createEvent("MouseEvents");
					 // e.initEvent("click", true, true);
					 // document.getElementById("desc1").dispatchEvent(e);
					 
				}else{
					return false
				}
			}
		},
		onLoad(option) {
			
			var Snap = setInterval(()=>{
				this.time--
				
			},1000)
				
			
			// console.log(option.item)
			// console.log(JSON.parse(option.item))

			// if(option.item){
			// 	this.detail = JSON.parse(option.item)
			// 	// console.log(this.detail)
			// 		this.imgurl = this.detail.list[0].pic.url
			// }
			// console.log(this.detail.list[0].pic.url);
			// 轮播图图片主路径

			// console.log(this.detail.list[0].pic.list);
			console.log(option.id)
			// console.log(option.id);
			// var id = String(13705)
			// console.log(typeof(id));
			
			if(option.id){
				this.$get(`/1.1/classes/goods?where={"id":"${option.id}"}`).then(res => {
					console.log(res)
					this.detail = res.results[0]
					this.imgurl = this.detail.list[0].pic.url
					var newimglist = []
					newimglist = this.detail.list[0].pic.list
				
					for (var i = 0; i < newimglist.length; i++) {
						// console.log(i);
						// console.log(newimglist[i].b);
						// console.log(this.imgurl + newimglist[i].b);
						// 预览图片的数组
						this.imglist.push(this.imgurl + newimglist[i].b)
					}
					// console.log(this.imglist);
				
					// this.banner = res.results
				})
			}
			

			this.$get('/1.1/classes/banner').then(res => {
				// console.log(res)
				this.banner = res.results
			})
		},

	}
</script>

<style lang="scss" scoped>
	swiper {
		width: 100%;
		height: 1000upx;

		swiper-item {
			image {
				width: 100%;
				height: 1000upx;
			}
		}
	}


	.top {
		position: sticky;
		top: 0;
		z-index: 100;
		height: 100upx;
	}

	.tab {
		flex-direction: column;

		&.active {
			border-bottom: 4upx solid #fae456;
		}
	}

	.cu-btn.lg {
		width: 46%;
	}

	.fixeds {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;
		// border-top: 1px solid black;
		box-shadow: 0 0 5upx 1upx rgba(0, 0, 0, 0.5);

	}
	.qianggou{
		background-color: #eaeaea !important;
		pointer-events: none;
	}
</style>
